<template>
  <div v-loading="loading" class="sale-statistics card">
    <flexbox class="card-title">
      <span class="icon wk wk-target" />
      <div class="card-title-center text-one-ellipsis">
        {{ options[value - 1].name || "线索统计" }}
      </div>
      <div class="card-title-right">
        <!--<span class="box">{{ filterText }}</span>
        <span class="box">{{ timeLine }}</span>-->
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-date-picker
          v-model="value1"
          type="year"
          placeholder="选择年"
          value-format="yyyy"
          ref="selectYear"
        >
        </el-date-picker>
        <el-button @click="changeFn" type="primary">查询</el-button>
        <el-button @click="clearData" type="reset">清空</el-button>
      </div>
    </flexbox>
    <div id="sale-statistics" />
  </div>
</template>

<script>
import { crmQueryStatisticsCurveAPI } from "@/api/crm/workbench";

import echarts from "echarts";
import ChartMixin from "./ChartMixin";
import { mapGetters } from "vuex";

export default {
  name: "SaleStatistics",
  mixins: [ChartMixin],
  props: {},
  data() {
    return {
      radio1: "今日",
      value1: "",
      value: 1,
      options: [
        { name: "线索量", value: 1 },
        { name: "报课量", value: 2 },
        { name: "报课率", value: 3 },
        { name: "加好友量", value: 4 },
        { name: "加好友率", value: 5 },
        { name: "加群量", value: 6 },
        { name: "加群率", value: 7 },
        { name: "成交量", value: 8 },
        { name: "成交率", value: 9 },
        { name: "KPI", value: 10 },
      ],
      optionName: "合同金额",
      optionValue: 1,
      chartOption: {
        tooltip: {},
        legend: {
          data: ["用户来源"],
        },
        xAxis: {
          type: "category",
          boundaryGap: false, //坐标轴两边不留白
          data: [
            "2019-1-1",
            "2019-2-1",
            "2019-3-1",
            "2019-4-1",
            "2019-5-1",
            "2019-6-1",
            "2019-7-1",
          ],
          name: "日期统计", //X轴 name
          nameTextStyle: {
            //坐标轴名称的文字样式
            color: "#FA6F53",
            fontSize: 16,
            padding: [0, 0, 0, 20],
          },
          axisLine: {
            //坐标轴轴线相关设置。
            lineStyle: {
              color: "#FA6F53",
            },
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "数据源",
            type: "line",
            data: [500, 200, 360, 100],
          },
        ],
      },
      chartObj: null,
      loading: false,
    };
  },
  computed: {
    ...mapGetters(["manage"]),
    // 目标设置权限
    hasSetAuth() {
      return this.manage && this.manage.crm && this.manage.crm.achievement;
    },
  },
  methods: {
    initChart() {
      this.chartObj = echarts.init(document.getElementById("sale-statistics"));
      this.chartObj.setOption(this.chartOption, true);
    },

    /**
     * 下拉菜单选项选择
     * @param index 选项序号
     */
    handleCommand(index) {
      if (this.optionValue === this.options[index].value) return;
      this.optionName = this.options[index].name;
      this.optionValue = this.options[index].value;
      this.getData();
    },
    changeFn(e) {
      this.getData();
    },
    clearData() {
      this.value1 = "";
      this.getData();
    },
    getData() {
      this.loading = true;
      crmQueryStatisticsCurveAPI({
        year: this.value1,
        type: this.value,
      })
        .then((res) => {
          const list = res.data.list || [];
          this.chartOption.series[0].data = res.data.leadsStatistics.values;
          this.chartOption.xAxis.data = res.data.leadsStatistics.xAxis;
          // this.chartOption.yAxis.data = res.data.leadsStatistics.yAxis
          this.chartObj.setOption(this.chartOption, true);
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    /**
     * 进入设置页面
     */
    enterSetPage() {
      this.$router.push({
        name: "crmBizGoals",
      });
    },
  },
  watch: {
    //观察option的变化
    chartOption: {
      handler(newVal, oldVal) {
        if (this.chartObj) {
          if (newVal) {
            this.chartObj.setOption(newVal);
          } else {
            this.chartObj.setOption(oldVal);
          }
        } else {
          this.initChart();
        }
      },
      deep: true, //对象内部属性的监听，关键。
    },
  },
};
</script>

<style scoped lang="scss">
@import "style";
#sale-statistics {
  width: 100%;
  height: 300px;
}
</style>
